/*
  学习目标：深入props-children属性
  类似：vue中的插槽
  本质：组件标签夹着的内容区域
  特点：
    childre属性可以是任意数据类型，与 props 的其它属性没有区别

*/

import React from 'react';
class App extends React.Component {
  render() {
    return (
      <div>
        我是app父组件
        <Child>我是child里面的字符串</Child>
        <Child>{123}</Child>
        <Child>{false}</Child>
        <Child>{null}</Child>
        <Child>{undefined}</Child>
        {/* 对象 和 数组 */}
        {/* 传递对象，内容接收到的是对象，直接渲染会报错 */}
        {/* <Child>{{ name: 'zs', age: 20 }}</Child> */}
        <Child>{[<i>1</i>, <i>2</i>]}</Child>
        {/* 函数，jsx */}
        {/* <Child>
          {() => {
            console.log('我是传递的函数 -----> ');
          }}
        </Child> */}
        <Child>{<h1>我是jsx本身</h1>}</Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    // this.props.children();
    // console.log('this.props -----> ', this.props.children());
    return <div>我是Child子组件 - {this.props.children}</div>;
  }
}

export default App;
